count=20;

for i in [0...count]
    $img = $('<img>', {class:'item', src:"img/#{i}.png"})
    $img .appendTo $('.grid')

$('.page-next').on 'click', ->
    $('.grid img').each ->
        r = Math.random() * 1000
        $(this).delay(r).animate opacity: 0,
            {
                step: (n)->
                    s = 1-n;
                    $(this).css("transform", "scale("+s+")");
                ,duration: 1000
            }
    .promise().done(->
        $("img").each(()->
            d = Math.random()*1000;
            $(this).delay(d).animate({opacity: 1}, {
                step: (n)->
                    ry = (1-n)*360;
                    tz = (1-n)*1500;
                    $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
                , 
                duration: 3000,
                easing: 'easeOutQuint'
            })
        )
    )

$('.page-pre').on 'click', ->
    $('.grid img').each ->
        r = Math.random() * 1000
        $(this).delay(r).animate
            opacity: 1,
            {
                step: (n)->
                    $(this).css('transform', 'scale(#{1-n})')
                ,
                duration: 1000
            }
storm = ->
    $("img").each(()->
        d = Math.random()*1000;
        $(this).delay(d).animate({opacity: 1}, {
            step: (n)->
                ry = (1-n)*360;
                tz = (1-n)*1000;
                $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
            , 
            duration: 3000, 
            easing: 'easeOutQuint', 
        })
    )
